<template>
  <div class="Tourist">
    <div class="top">
      <ScreenTitle v-model:title-value="titleValue">
        <p class="right">
          可预算总量
          <span>99999</span>
          人
        </p>
      </ScreenTitle>
    </div>
    <div class="center">
      <span v-for="(i, index) in people" :key="index">{{ i }}</span>
    </div>
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script lang="ts" setup name="Tourist">
import { onMounted, ref, getCurrentInstance, inject } from 'vue'
/* 在 Vue 3 中，<script setup> 编译后的代码会在组件的 setup() 函数中运行。setup() 函数在组件实例创建之前被调用，并且它接收两个参数：props 和 context。
由于 setup() 是在组件实例初始化之前调用的，因此您不能直接访问组件实例（this）或组件的 DOM 元素。
为了访问组件的 DOM 元素或确保代码在组件挂载后执行，您应该使用 Vue 3 提供的组合式 API 生命周期钩子，如 onMounted()。这个钩子会在组件的 DOM 元素被挂载到页面上之后被调用。 */
import 'echarts-liquidfill'
// 获取当前组件实例
let titleValue = ref('实时游客统计')
let people = ref('291021人')
const charts = ref()
const initEchartsOneFn = () => {
  // echarts初始化
  const Echarts = inject('$echarts')

  let myChart = (Echarts as any).init(charts.value)
  // 或
  // let myChart = proxy.$echarts.init(container.value);
  const option = {
    //标题组件
    title: {
      text: '水球图'
    },
    //x|y轴组件
    xAxis: {},
    yAxis: {},
    //系列:决定你展示什么样的图形图标
    series: {
      type: 'liquidFill', //系列
      data: [0.6, 0.4, 0.2], //展示的数据
      waveAnimation: true, //动画
      animationDuration: 3,
      animationDurationUpdate: 0,
      radius: '100%', //半径
      outline: {
        //外层边框颜色设置
        show: true,
        borderDistance: 8,
        itemStyle: {
          color: 'skyblue',
          borderColor: '#294D99',
          borderWidth: 8,
          shadowBlur: 20,
          shadowColor: 'rgba(0, 0, 0, 0.25)'
        }
      }
    },
    //布局组件
    grid: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0
    }
  }

  myChart.setOption(option)
}
onMounted(() => {
  initEchartsOneFn()
})
</script>

<style scoped>
.Tourist {
  margin: 22px 0px;
  background: url(../../images/dataScreen-main-lb.png) no-repeat;
  background-size: 100% 100%;
  .charts {
    width: 100%;
    height: 270px;
  }
  .top {
    .right {
      display: flex;
      justify-content: flex-end;
      margin-right: 10px;
      span {
        margin-left: 5px;
        margin-right: 5px;
        color: yellowgreen;
      }
    }
  }
  .center {
    padding: 10px;
    margin-top: 10px;
    display: flex;

    /* 颜色要在最后放,否则会导致先渲染而后导致我们的图片颜色不是原来的 */
    span {
      flex: 1;
      height: 40px;
      text-align: center;
      line-height: 40px;
      background: url(../../images/total.png) no-repeat;
      background-size: 100% 100%;
      background-color: aqua;
    }
  }
  .bottom {
    width: 100%;
    height: 280px;
  }
}
</style>
